<template>
  <div v-loading="$store.state.app.loadingFull||loading" element-loading-background="rgba(0, 0, 0, 0.4)" class="login_container">
    <div class="login_container_left" :style="{ backgroundImage: 'url(' + leftBackground + ')' }">
      <div class="login_container_left_logo">
        <div class="login_container_left_logo_img" :style="{ backgroundImage: 'url(' + leftLogo + ')' }" />
        <div class="login_container_left_logo_name" :style="{ backgroundImage: 'url(' + leftName + ')' }" />
      </div>
      <a class="login_container_left_website" href="https://www.cascadeiot.com" target="_blank">https://www.cascadeiot.com</a>

    </div>
    <div class="login_container_right">
      <div class="login_container_right_main">
        <div v-if="loginType!='4'" class="login_container_right_main_header">
          云耀生产管理系统
        </div>
        <div v-if="loginType!='4'" class="login_container_right_main_header2">
          Yunyao production management system
        </div>
        <!--    正常登录1    -->
        <LoginComponent v-if="loginType=='1' " />

        <!--    验证码登录2    -->
        <VerifyLoginComponent v-if="loginType=='2'" />
        <!--    忘记密码3    -->
        <!--    注册账号4    -->
        <RegisterComponent v-if="loginType=='4' " />
      </div>

    </div>

  </div>
</template>

<script>
const login_left_Background = require('@/assets/images/login/login_left_Background.png')
const login_left_logo = require('@/assets/images/login/login_left_logo.svg')
const login_left_name = require('@/assets/images/login/login_left_name.svg')
import LoginComponent from './loginComponent'
import VerifyLoginComponent from './verifyLoginComponent'
import RegisterComponent from './registerComponent'
import CryptoJS from 'crypto-js'
import defaultSettings from '@/settings'
import { weChatScanLogin } from '@/api/common/login'
import { setToken } from '@/utils/auth'
export default {
  name: 'Login',
  beforeRouteEnter(to, from, next) {
    if (from.name || typeof (from.name) == 'undefined') {
      console.log('Login Reload ...')
    }
    next()
  },
  components: {
    LoginComponent, VerifyLoginComponent, RegisterComponent
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value.length <= 0) {
        callback(new Error('公司编码不能为空'))
      } else {
        callback()
      }
    }
    const validateCompanyCode = (rule, value, callback) => {
      if (value.length <= 0 && value !== 'superadmin') {
        callback(new Error('公司编码不能为空'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length <= 0) {
        callback(new Error(this.$t('login.passwordNotNull')))
      } else {
        callback()
      }
    }
    const validateVerifyCode = (rule, value, callback) => {
      if (value.length <= 0) {
        callback(new Error(this.$t('login.verifyCodeNotNull')))
      } else {
        callback()
      }
    }
    return {
      leftBackground: login_left_Background,
      leftLogo: login_left_logo,
      leftName: login_left_name,
      verifyCode: '',
      loginForm: {
        companyCode: '',
        username: '',
        password: '',
        verifyCode: ''
      },
      loginRules: {
        companyCode: [{
          required: true,
          trigger: 'change',
          validator: validateCompanyCode
        }],
        username: [{
          required: true,
          trigger: 'change',
          validator: validateUsername
        }],
        password: [{
          required: true,
          trigger: 'change',
          validator: validatePassword
        }],
        verifyCode: [{
          required: true,
          trigger: 'change',
          validator: validateVerifyCode
        }]
      },
      passwordType: 'password',
      capsTooltip: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
      otherQuery: {},
      isReload: false,
      loginType: '1'
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  mounted() {
    const url = window.location.href
    if (url.indexOf('?code=') > -1 && !this.$store.state.user.token) {
      this.loading = true
      const code = url.substring(url.indexOf('?code=') + 6, url.indexOf('&state'))
      weChatScanLogin({
        code: code
      }).then(res => {
        this.$store.commit('user/SET_TOKEN', res.token) // token存入state
        setToken(res.token) // token存入cookie
        this.$store.commit('user/SET_loginTag', new Date().getTime())
        console.log(this.$store.state.user)
        this.loading = false
        window.location.href = url.substring(url.indexOf('https://'), url.indexOf('/?code'))
      })
    }
    if (this.$route.query.key) {
      var key = this.$route.query.key.replace(/[\s]/g, '+')
    }
    if (this.$route.query.key && JSON.parse(this.decrypt(key, defaultSettings.aesKey))) {
      this.loginType = '4'
    }
  },
  destroyed() {
  },
  methods: {
    // aes解密
    decrypt(word, keyStr) {
      keyStr = keyStr || 'absoietlj32fai12'
      var key = CryptoJS.enc.Utf8.parse(keyStr)
      var decrypt = CryptoJS.AES.decrypt(word, key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      })
      return CryptoJS.enc.Utf8.stringify(decrypt).toString()
    },
    typeChange(type) {
      console.log(type)
      this.loginType = type
    },
    register() {
      this.$router.push('/register')
    },
    checkForm() {
      if (!this.loginForm.username) {
        this.$message({
          message: '请输入用户名',
          type: 'warning'
        })
        return false
      }
      if (!this.loginForm.password) {
        this.$message({
          message: '请输入密码',
          type: 'warning'
        })
        return false
      }
      return true
    },
    handleLogin() {
      if (this.checkForm()) {
        this.loading = true
        const cacheLoginForm = this.$deepClone(this.loginForm)
        this.$store.dispatch('user/login', cacheLoginForm)
          .then(() => {
            this.$router.push({
              path: this.redirect || '/homePage',
              // path: this.redirect || '/',
              query: this.otherQuery
            })
          }).finally(() => {
            this.loading = false
          })
      }
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
}
</script>

<style lang="less" scoped>

.login_container {
  width: 100%;
  height: 100%;
  //height: 940px;
  display: flex;

  .login_container_left{
    width: 50%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;justify-content: center;align-items: center;

    .login_container_left_logo_img{
      width: 360px;
      height: 40px;
      background-size: cover;
    }
    .login_container_left_logo_name{
      width: 360px;
      height: 30px;
      background-size: cover;
      margin-top: 25px;
    }

    .login_container_left_website{
      position: absolute;
      bottom: 40px;
      font-size: 15px;
      color: white;
    }
  }
  .login_container_right{
    flex: 1;
    height: 100%;
    display: flex;justify-content: center;align-items: center;

    .login_container_right_main{
      width: 500px;
      .login_container_right_main_header{
        font-size: 22px;
        color: #333333;
      }
      .login_container_right_main_header2{
        font-size: 16px;
        color: #333333;
        margin-top: 10px;
      }
      .login_container_right_main_input{
        margin-top: 60px;
      }
      .login_container_right_main_input2{
        margin-top: 20px;
      }
      .login_container_right_main_button{
        margin-top: 100px;
        /deep/ .el-button{
          width: 100%;
          height: 40px;
          background-color: rgba(57, 125, 255, 1);
          border-radius: 8px;
          border: 0px;
        }
        /deep/ .el-button:hover{
          background-color: rgba(57, 125, 255, 0.8);
        }
      }
    }
  }
  /deep/ .el-input__inner{
    width: 100%;
    height: 40px;
    border-radius: 8px;
    background-color: rgba(231, 234, 243, 0.6);
    padding-left: 20px;
    border: 0px;

  }
  /deep/ .el-input__icon{
    line-height: 40px;
  }
  /deep/ .el-input__inner::placeholder {
    color: rgba(51, 51, 51, 0.6);
  }
}
</style>

